
<div class="col-lg-8 col-md-8 col-lg-offset-2 col-md-offset-2">

  <div class="row manager-title">
    <div class="col-lg-3 col-md-3 col-lg-offset-4 col-md-offset-4"><h3>Order Manager</h3></div>
  </div>
  <div class="row">
    <div class="col-lg-6 col-md-6 order-status-div">
      <button class="btn btn-default" ng-click="vm.getOrdersByStatus('all')">&nbsp;all&nbsp;&nbsp;</button>
      <button class="btn btn-primary" ng-click="vm.getOrdersByStatus('WAIT')">&nbsp;wait&nbsp;</button>
      <button class="btn btn-info" ng-click="vm.getOrdersByStatus('RECEIVE')">receive</button>
      <button class="btn btn-warning" ng-click="vm.getOrdersByStatus('DELIVER')">deliver</button>
      <button class="btn btn-danger" ng-click="vm.getOrdersByStatus('REJECT')">&nbsp;reject</button>
      <button class="btn btn-success" ng-click="vm.getOrdersByStatus('SUCCESS')">&nbsp;success</button>
    </div>

  </div>
  <div>
    <table class="table table-bordered table-hover">
      <thead>
      <tr class="">
        <th>processNumber</th>
        <th>amount</th>
        <th>food</th>
        <th>create time</th>
        <th>status</th>
        <th>customer</th>
        <th>operator</th>
      </tr>
      </thead>
      <tbody>
      <tr  ng-repeat="order in vm.orders">
        <th>{{order.processNumber}}</th>
        <th>{{order.amount}}</th>
        <th>{{order.foods[0].name}}...</th>
        <th>{{order.createDate}}</th>
        <th>{{order.status}}</th>
        <th>{{order.customer.name}}</th>
        <th>
          <div class=" form-inline" aria-expanded="false">
          <button class="btn btn-primary order-operator-btn" ng-if="order.status=='WAIT'" ng-click="vm.update(order,'RECEIVE')">
            <i class="fa fa-check-circle-o" aria-hidden="true"></i> Receive
          </button>
          <button class="btn btn-danger order-operator-btn" ng-if="order.status=='WAIT'" ng-click="vm.update(order,'REJECT')">
            <i class="fa fa-ban" aria-hidden="true"></i> Reject
          </button>
          <button class="btn btn-primary order-operator-btn" ng-if="order.status=='RECEIVE'" ng-click="vm.update(order,'DELIVER')">
            <i class="fa fa-deviantart" aria-hidden="true"></i> Deliver
          </button>
          <button class="btn btn-info order-operator-btn" ng-click="vm.openDetail(order)">
            <i class="fa fa-info-circle" aria-hidden="true"></i> Detail
          </button>
          </div>
        </th>
      </tr>
      </tbody>
    </table>

    <div class="modal fade" tabindex="-1" role="dialog" id="myModal">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title"></h4>
          </div>
          <div class="modal-body">

            <div class="panel panel-primary order-item-idv">
              <div class="panel-heading">Order Info</div>
              <div class="panel-body">
                <ul class="list-group">
                  <li class="list-group-item list-group-item-primary">process number:{{vm.currentOrder.processNumber}}</li>
                  <li class="list-group-item list-group-item-primary">customer name:{{vm.currentOrder.customer.name}}</li>
                  <li class="list-group-item list-group-item-primary">delivery address:{{vm.currentOrder.customer.address}}</li>
                  <li class="list-group-item list-group-item-primary">create time:{{vm.currentOrder.createDate}}</li>
                  <li class="list-group-item list-group-item-primary">status:{{vm.currentOrder.status}}</li>
                </ul>
              </div>
            </div>


            <div class="panel panel-primary order-item-idv">
              <div class="panel-heading">Food Info</div>
              <div class="panel-body">
                <table id="food-list-table" class="table">
                  <tr id="food-list-tr">
                    <td>#</td>
                    <td>Food Name</td>
                    <td>Food Price</td>
                    <td>Food Amount</td>
                  </tr>

                    <tr ng-repeat="food in vm.currentOrder.foods">
                      <td>{{$index}}</td>
                      <td>{{food.name}}</td>
                      <td>{{food.price}}</td>
                      <td>{{food.price}}</td>
                    </tr>

                </table>
              </div>
            </div>

            <div class="panel panel-primary order-item-idv">
              <div class="panel-heading">Order Total Money</div>
              <ul class="list-group">
                <li class="list-group-item list-group-item-default">{{vm.currentOrder.amount}}</li>
              </ul>
            </div>

            <div class="panel panel-primary"  ng-if="vm.currentOrder.status=='RECEIVE'||vm.currentOrder.status=='WAIT'">
              <div class="panel-heading">Operater</div>
              <!--挂载订单processnumber-->
              <div class="list-group" id="process-number-holder">
                <a class="list-group-item list-group-item-success" ng-if="vm.currentOrder.status=='WAIT'" ng-click="vm.updateCurrent('RECEIVE')">
                  <i class="fa fa-check-circle-o" aria-hidden="true"></i> Receive
                </a>
                <a class="list-group-item list-group-item-danger" ng-if="vm.currentOrder.status=='WAIT'" ng-click="vm.updateCurrent('REJECT')">
                  <i class="fa fa-ban" aria-hidden="true"></i> Reject
                </a>
                <a class="list-group-item list-group-item-info" ng-if="vm.currentOrder.status=='RECEIVE'" ng-click="vm.updateCurrent('DELIVER')">
                  <i class="fa fa-deviantart" aria-hidden="true"></i> Deliver</a>
              </div>
            </div>

          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

  </div>

</div>

